<template>
	<view class="content">
		<view class="tab">
			<view><image @click="goMenu" src="../../static/icon/菜单-实色.png"></image><text class="cur">{{questionId}}</text><text>/{{cnt}}</text></view>
			<view style="margin-top: 20rpx;">剩余时间: {{formatTime(remainingTime)}}</view>
			<view class="">
				<image @click="dialogToggle('warn')" src="../../static/icon/交卷02.png" mode=""></image>
			</view>
		</view>
		<view>
			<!-- 提示信息弹窗 -->
			<uni-popup ref="message" type="message">
				<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
			</uni-popup>
		</view>
		
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="确认" title="警告" content="是否确认交卷？" @confirm="dialogConfirm"
					@close="dialogClose"></uni-popup-dialog>
			</uni-popup>
		</view>
		<view class="box">
			<view><text class="no" v-model="questionNum">第{{questionNum}}题---</text><text class="type">{{qtype}}</text></view>
			<view class="que">
				{{content}}
			</view>
			<view  class="opt">
				<image @click="selectAnswer" :data-ans="isCorrect[0]" :data-index="1" :src="selectedIndex[questionNum]==1?'../../static/icon/A_selected.png':'../../static/icon/A_round_字母a_by_climei.png'"></image><text v-model="opt1">{{opt1}}</text>
			</view>
			<view  class="opt">
				<image @click="selectAnswer" :data-ans="isCorrect[1]" :data-index="2" :src="selectedIndex[questionNum]==2?'../../static/icon/B_selected.png':'../../static/icon/B_round_字母b.png'"></image><text v-model="opt2">{{opt2}}</text>
			</view>
			<view  class="opt">
				<image @click="selectAnswer" :data-ans="isCorrect[2]" :data-index="3" :src="selectedIndex[questionNum]==3?'../../static/icon/C_selected.png':'../../static/icon/C_round_字母c.png'"></image><text v-model="opt3">{{opt3}}</text>
			</view>
			<view  class="opt">
				<image @click="selectAnswer" :data-ans="isCorrect[3]" :data-index="4" :src="selectedIndex[questionNum]==4?'../../static/icon/D_selected.png':'../../static/icon/D_round_字母d.png'"></image><text v-model="opt4">{{opt4}}</text>
			</view>
		</view>
		<view class="page">
			<image @click="prevPg" :data-curpg="questionNum" src="../../static/icon/上一页.png"></image>
			<image @click="nextPg" :data-curpg="questionNum" src="../../static/icon/下一页.png"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				finalTime:0,
				sum:0,
				clicks:0,
				totalTime: 7200, // 总时间（单位：秒）
				remainingTime: 7200, // 剩余时间（单位：秒）
				timerId: null ,// 计时器 ID
				questionNum:1,
				questionId:0,
				content:'',
				isCorrect:[],
				isRight:[],
				answer:'',
				qtype:'',
				opt1:'',
				opt2:'',
				opt3:'',
				opt4:'',
				selectedIndex:[],
				cnt:0,
				sc:0,
				sumSocre:[],
				type: 'center',
				msgType: 'success',
				messageText: '这是一条成功提示',
				value: '',
				correctNumber:0,
				errorNumber:0
			}
		},
		methods: {
			
			startTimer() {
				this.timerId = setInterval(() => {
					this.remainingTime--;
					if (this.remainingTime === 0) {
						clearInterval(this.timerId);
						          // 倒计时结束后的逻辑处理
						          // 例如：提交答题结果或显示时间到达的提示信息
					}
				}, 1000); // 每秒执行一次
			},
			formatTime(time) {
				const hours = Math.floor(time / 3600);
				const minutes = Math.floor((time % 3600) / 60);
				const seconds = time % 60;
				return `${this.padZero(hours)}:${this.padZero(minutes)}:${this.padZero(seconds)}`;
			},
			padZero(value) {
				return value.toString().padStart(2, '0');
			},
			
			
			
			loa:function(){
				
				var that = this;
				console.log(this.questionNum);
				var data={
					quesid:this.questionNum
				};
				uni.request({
					url:"http://localhost:8888/question",
					data:data,
					success(res) {
						if(res.data.code==200){
							that.sc=res.data.data[0].score;
							that.questionId=res.data.data[0].questionId;
							that.content=res.data.data[0].content;
							that.answer=res.data.data[0].answer;
							that.qtype=res.data.data[0].questionType;
							console.log(that.content);
						}else{
							uni.showToast({
								title:res.data.message
							})
						}
					}
				})
				
			},
			loa2:function(){
				var that = this;
				var data={
					quesid:this.questionNum
				};
				uni.request({
					url:"http://localhost:8888/option",
					data:data,
					success(res) {
						if(res.data.code==200){
							console.log(res.data.data[3].optText);
							that.opt1=res.data.data[0].optText;
							that.opt2=res.data.data[1].optText;
							that.opt3=res.data.data[2].optText;
							that.opt4=res.data.data[3].optText;
							that.isCorrect[0]=res.data.data[0].isCorrect;
							that.isCorrect[1]=res.data.data[1].isCorrect;
							that.isCorrect[2]=res.data.data[2].isCorrect;
							that.isCorrect[3]=res.data.data[3].isCorrect;
							console.log(that.isCorrect[0]);
							console.log(that.isCorrect[1]);
							console.log(that.isCorrect[2]);
							console.log(that.isCorrect[3]);
						}else{
							uni.showToast({
								title:res.data.message
							})
						}
					}
				})
			},
			countNum:function(){
				var that = this;
				uni.request({
					url:"http://localhost:8888/qNumber",
					success(res) {
						if(res.data.code==200){
							that.cnt=res.data.data[0].cnt;
						}else{
							uni.showToast({
								title:res.data.message
							})
						}
					}
				})
			},
			selectAnswer:function(e){
				this.clicks++;
				console.log(e);
				var i = e.target.dataset.index;
				this.selectedIndex[this.questionNum] = i;
				console.log(this.selectedIndex[this.questionNum]);
				this.$forceUpdate();
				if(e.target.dataset.ans==1){
					this.sumSocre[this.questionNum]=this.sc;
					this.isRight[this.questionNum]=1;
					console.log("正确");
					console.log("sum:"+this.sumSocre);
				}else{
					console.log("错误");
					this.sumSocre[this.questionNum]=0;
					this.isRight[this.questionNum]=0;
					console.log("sum:"+this.sumSocre);
				}
			},
			prevPg:function(e){
				if(e.target.dataset.curpg>1){
					console.log(this.questionNum);
					console.log("上一页");
					this.questionNum-=1;
					this.loa();
					this.loa2();
					
				}else{
					console.log("已是第一题")
				}
			},
			nextPg:function(e){
				console.log(e);
				if(e.target.dataset.curpg<this.cnt){
					console.log(this.questionNum);
					console.log("下一页");
					this.questionNum+=1;
					this.loa();
					this.loa2();
					
				}else{
					this.dialogToggle('warn');
					console.log(this.questionNum);
					console.log("已是最后一题")
				}
			},
			goMenu:function(){
				uni.navigateTo({
					url:'/pages/optSelect/optSelect?selection=' + encodeURIComponent(JSON.stringify(this.selectedIndex))
				});
			},
			dialogToggle(type) {
				this.msgType = type
				this.$refs.alertDialog.open()
			},
			dialogConfirm() {
				// this.sumSocre.forEach(item => this.sum += item)
				// console.log("SUM:"+this.sum);
				
				for(const index in this.sumSocre) {
					if(!this.sumSocre[index]) continue
					this.sum+=this.sumSocre[index]
					if(this.sumSocre[index] > 0)
						this.correctNumber++;
				}
				for(const indexx in this.sumSocre){
					if(this.sumSocre[indexx] == 0)
						this.errorNumber++;
				}
				console.log("err:"+this.errorNumber)
				console.log("time is "+this.formatTime(this.totalTime-this.remainingTime))
				console.log("isRight:"+this.isRight)
				// console.log(typeof(this.sum))
				// console.log('点击确认')
				this.messageText = `交卷成功`
				this.$refs.message.open()
				uni.setStorageSync('isRight', this.isRight);
				uni.setStorageSync('ftime', this.formatTime(this.totalTime-this.remainingTime));
				uni.setStorageSync('time', this.formatTime(this.remainingTime));
				uni.setStorageSync('selection', this.selectedIndex);
				uni.setStorageSync('total', this.cnt);
				uni.setStorageSync('errorNumber', this.errorNumber);
				uni.setStorageSync('correctNumber', this.correctNumber);
				uni.setStorageSync('sum', this.sum);
				uni.reLaunch({
					url:'/pages/examResult/examResult'
				});
				
			},
			dialogClose() {
				console.log('点击关闭')
			}
		},
		
		
		onShow(options) {
			console.log(uni.getStorageSync('qid'));
			this.questionNum=uni.getStorageSync('qid');
			this.loa();
			this.loa2();
			
		},
		
		beforeDestroy() {
			clearInterval(this.timerId); // 组件销毁前清除计时器
		},
		mounted() {
			this.countNum();
			this.loa();
			this.loa2();
			this.startTimer();
		}
	}
</script>

<style>
	.content{
		display: flex;
		flex-direction: column;
		
	}
	.tab{
		border:2rpx solid whitesmoke;
		background-color: #F0EEEF;
		border-radius: 40px;
		display: flex;
		justify-content: space-around;
		margin-bottom: 10px;
		
	}
	.tab>view{
		height: 50rpx;
		padding: 10px;
	}
	
	.tab>view>image{
		height: 30px;
		width: 30px;
	}
	.box{
		display: flex;
		flex-direction: column;
		border:2rpx solid whitesmoke;
		background-color: #F0EEEF;
		border-radius: 40px;
		padding-top: 10px;
		padding-left: 10px;
	}
	.que{
		font-weight: bold;
	}
	.page{
		display: flex;
		justify-content: center;
	}
	.page>image{
		
		
		height: 50px;
		width: 50px;
		border-radius: 50px;
		padding: 25px;
	}
	.cur{
		color: red;
	}
	.no{
		color: darkgreen;
		font-weight: bold;
	}
	.type{
		color: darkgreen;
	}
	.opt{
		width: 200px;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding: 20px;
	}
	.opt>image{
		height: 45px;
		width: 45px;
		border-radius: 45px;
		
	}
	
</style>
